<template>
    <div class="newList-container">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <router-link :to="'/home/newsInfo/'+i+'/'+item.categoryId" v-for="(item,i) in newsList"
                             :key="item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.images[0]">
                    <div class="mui-media-body">
                        <div>
                            <p class="iName">{{item.name}}</p>
                            <div class="star">
                                <span class="star-before">⭐⭐⭐⭐⭐</span>
                                <span class="star-after" :style="{width:item.score+'%'}">⭐⭐⭐⭐⭐</span>
                            </div>
                        </div>
                        <p class='mui-ellipsis'>营业时间：{{item.businessHours}}</p>
                    </div>
                </router-link>
            </li>
        </ul>
        <div class='loadmore loading' v-if="hasMore" @click="getNewList">点击加载更多</div>
        <div class='loadmore' v-else>底部</div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';

    export default {
        data() {
            return {
                newsList: [],
                catId: this.$route.query.id,
                limit: 10,
                page: 0,
                hasMore: true,
                count: 0,
            }
        },
        created() {
            this.getNewList();
        },
        methods: {
            getNewList() {
                if (!this.hasMore) return;
                this.page++;
                const data1 = {
                    _limit: this.limit,
                    _page: this.page,
                };
                this.$http.get('categories/' + this.catId + '/shops', {params: data1}).then(result => {
                    if (result.status === 200) {
                        this.newsList = this.newsList.concat(result.data);
                        this.$http.get('categories/' + this.catId + '/shops').then(res => {
                            this.count = parseInt(res.data.length);
                            var flag = this.limit * this.page < this.count;
                            this.hasMore = flag;
                        });
                    } else {
                        Toast('网络较差，请稍候再试')
                    }
                })
            },
        }
    }


</script>

<style lang="less" scoped>
    .newList-container {
        border: 0;

        .mui-table-view:after {
            height: 0;
        }

        .mui-media-body {
            position: relative;
            div {
                display: flex;
                justify-content: space-between;
                .iName {
                    color: #000;
                    font-size: 18px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 222px;
                    margin-bottom: 3px;
                }
                .star {
                    position: absolute;
                    right: -3px;
                    top: 0px;
                }
                .star-before{
                    color: #b2b2b2;
                }
                .star-after {
                    position: absolute;
                    left: 0;
                    color: goldenrod;
                    overflow: hidden;
                }
            }
        }

        .loadmore {
            color: #888;
            font-size: 16px;
            line-height: 50px;
            text-align: center;
        }

        .loadmore.loading::before {
            content: '';
            width: 30px;
            height: 30px;
            margin-top: -10px;
            margin-right: 10px;
            display: inline-block;
            vertical-align: middle;
            animation: loading 1s steps(12) infinite;
            background: transparent url() no-repeat;
            background-size: 100%;
        }

        @keyframes loading {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }
    }
</style>